<html>
<head>
<title>Pretty pictures!</title>
</head>
<body>
    <center>
    <h1>Look, pictures!</h1>
    <img alt="serenity logo (squished)" src="file:///res/graphics/buggie.png" width="40" height="40" />
    <img alt="serenity logo (normal)" src="file:///res/graphics/buggie.png" width="64" height="64" />
    <img alt="serenity logo (stretched)" src="file:///res/graphics/buggie.png" width="100" height="100" />
    <img alt="serenity logo (unspecified size)" src="file:///res/graphics/buggie.png" />

    <h1>Look, not pictures!</h1>
    <img alt="invalid path (64x64)" src="file:///res/graphics/file-does-not-exist.png" width="64" height="64" />
    <img alt="invalid path (100x100)" src="file:///res/graphics/file-does-not-exist.png" width="100" height="100" />
    <img alt="invalid path (unspecified size)" src="file:///res/graphics/file-does-not-exist.png" />
    <img src="file:///res/graphics/file-does-not-exist.png" />

    <h1>Look, scaling!</h1>
    <img alt="serenity screenshot (10%)" src="serenity-screenshot.png" width="102" height="77" /> <br/>
    <img alt="serenity screenshot (20%)" src="serenity-screenshot.png" width="204" height="153" /> <br/>
    <img alt="serenity screenshot (50%)" src="serenity-screenshot.png" width="512" height="384" /> <br/>
    <img alt="serenity screenshot (150%)" src="serenity-screenshot.png" width="1536" height="1152" />
    </center>
</body>
</html>
